JavaScript Promise Cheat Sheet — Basic Operations

JavaScript promises lets us add non-IO-blocking, asynchronous code easily into our JavaScript app sequentially.

Therefore, they’re used everywhere.

In this article, we’ll look at how to use promises in our JavaScript code.

Create a Promise

We can create a promise with the Promise constructor.

For instance, we can write:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

to pass a callback into the Promise constructor.

resolve fulfills the promise by returning a value.

reject is a function that throws an error.

then Method

We can use the then method to get the resolved value of the promise.

For instance, we can write:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(
    val => console.log(val),
    err => console.log(err)
  )

The first then callback has the resolved value as the parameter.

The 2nd then callback has the rejected value as the parameter.

Chaining Promises

We can chain multiple promises by returning a promise in the then callback.

For instance, we can write:

Promise.resolve(1)
  .then(() => Promise.resolve(2))
  .then((val) => console.log(val))

We call Promise.resolve to create a promise that resolves.

In the first then callback, we return the promise created by Promise.resolve(2) .

Then we get the resolved value of that promise with the val parameter.

So val is 2.

Run All Promises Simultaneously

We can run all promises simultaneously with the Promise.all method.

For instance, we can write:

Promise.all([
    Promise.resolve(1),
    Promise.resolve(2),
    Promise.resolve(3),
  ])
  .then((vals) => console.log(vals))

We call Promise.all with 3 promises that resolve.

Then in the then callback, we have vals parameter that has the array of resolved values.

So vals is [1, 2, 3] , which are the resolved values of all the promises.

Wait for All Promises to be Settled Regardless of Result

We can use the Promise.allSettled method to run all promises simultaneously and get the results of them regardless of whether they’re resolved or rejected.

For instance, we can write:

Promise.allSettled([
    Promise.resolve(1),
    Promise.reject('error'),
    Promise.resolve(3),
  ])
  .then((vals) => console.log(vals))

Then we get:

[
  {
    "status": "fulfilled",
    "value": 1
  },
  {
    "status": "rejected",
    "reason": "error"
  },
  {
    "status": "fulfilled",
    "value": 3
  }
]

as the value of vals .

status has the promise status.

And value has the value.

Wait Until the First Promise is Resolved

The Promise.any method lets us wait until the first promise is resolved.

For instance, we can write:

Promise.any([
    Promise.reject('error'),
    Promise.resolve(1),
    Promise.resolve(3),
  ])
  .then((val) => console.log(val))

val is 1 since it’s the first promise that resolves.

Promise.any returns a promise with the value of the first promise that resolves.

Wait Until any of the Promises is Resolved or Rejected

We can use the Promise.race method to wait until any promise resolves or rejects.

So if we have:

Promise.race([
    Promise.reject('error'),
    Promise.resolve(1),
    Promise.resolve(3),
  ])
  .then((val) => console.log(val))
  .catch((err) => console.log(err))

Then the catch callback will log 'error' since the first promise rejects with reason 'error' .

Conclusion

We can use promises to make writing async JavaScript code easy.